<layout name="../../../resource/master" />
<script src="__ROOT__/node_modules/hdjs/js/jquery.min.js"></script>

<ul class="breadcrumb no-border no-radius b-b b-light pull-in">
    <li><a href="{:u('index')}"><i class="fa fa-home"></i>首页</a></li>
    <li><a href="#">商品管理</a></li>
    <li><a href="#">商品编辑</a></li>
</ul>
<div class="m-b-md">
    <h3 class="m-b-none">商品编辑</h3>
</div>
<section class="panel panel-default">
    <header class="panel-heading font-bold">商品编辑</header>
    <div class="panel-body">
        <form class="form-horizontal" method="post" action="" onsubmit="return store(this)">
            <div class="form-group">
                <label class="col-sm-2 control-label">所属分类</label>
                <div class="col-sm-10">
                    <select name="cid" class="form-control m-b">
                        <option value="1" tid="-1">请选择</option>
                        <volist name="cateData" id="vo">
                            <option <if condition="$oldData['cid']==$vo['cid']">selected</if>  value="{$vo['cid']}" tid="{$vo['tid']}">{$vo['_cname']}</option>
                        </volist>
                    </select>
                </div>
            </div>
            <!--异步回去规格和属性【商品详情页面的规格参数+下单选择颜色尺码】-->
            <script>
                $(function(){
                    //页面加载获取attr里面的内容
                    var attrHtml = $('#attr').html();
                    var oldCid = <?php echo $oldData['cid']?>;
                    //所属分类变
                    $('select[name=cid]').change(function(){
                        //1.触发异步事件
                        //2.$.post异步写出来
                        //3.获取数据、条件来获取数据【发送数据】
                        //4.测试异步是否正常发送
                        //5.php根据tid查询数据，并返回
                        //6.success中根据返回的数据，将这些数据写入标签并且写到页面中
                        var tid = $(':selected').attr('tid');
                        //顶级分类不能添加商品，顶级分类tid=0，这样在类型属性中查不到数据
                        if(tid==0){
                            alert('顶级分类不能添加商品');
                            $(this).val(0);
                            return false;
                        }
                        //新增加内容
                        var cid = $(this).val();
                        if(cid==oldCid){
                            //将我们之前存好的数据，写入即可
                            $('#attr').html(attrHtml);
                            return false;
                        }
                        //将tid写入到隐藏域中
                        $('input[name=tid]').val(tid);
                        //alert(tid);
                        //post方式发送异步；请求地址、请求数据、成功回调、返回的数据类型
                        $.post("{:u('ajaxGetSpec')}",{tid:tid},function(res){
                            var attr = '';
                            var spec = '';
                            $.each(res,function(k,v){
                                if(v.ttype==1){
                                    //说明是属性
                                    attr += '<tr><td>'+v.tname+'</td>';
                                    attr += '<td><select name="attr['+v.taid+']" id=""><option value="">请选择</option>';
                                    $.each(v.tvalue,function(kk,vv){
                                        attr += '<option value="'+vv+'">'+vv+'</option>';
                                    })
                                    attr +='</select></td></tr>';

                                }else{
                                    //说明是规格
                                    spec += '<tr><td>'+v.tname+'</td>';
                                    spec += '<td><select name="spec['+v.taid+'][spec][]" id=""><option value="">请选择</option>';
                                    $.each(v.tvalue,function(kk,vv){
                                        spec += '<option value="'+vv+'">'+vv+'</option>';
                                    })
                                    spec +='</select></td><td>附加价格</td><td>';
                                    spec +='<input type="text" name="spec['+v.taid+'][added][]" value=""></td><td>';
                                    spec +='<button type="button" class="btn btn-success btn-xs addSpec">追加</button></td></tr>';
                                }

                            })
                            $('#attr').html(attr);
                            $('#spec').html(spec);
                        },'json')
                    })
                })

            </script>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">所属品牌</label>
                <div class="col-sm-10">
                    <select name="bid" class="form-control m-b">
                        <option value="0">请选择</option>
                        <volist name="brandData" id="vo">
                            <option <if condition="$oldData['bid']==$vo['bid']">selected</if> value="{$vo['bid']}">{$vo['bname']}</option>
                        </volist>
                    </select>
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>

            <div class="form-group">
                <label class="col-sm-2 control-label">商品名称</label>
                <div class="col-sm-10">
                    <input type="text" value="{$oldData['gname']}" name="gname" class="form-control">
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商品货号</label>
                <div class="col-sm-10">
                    <input type="text" name="gnumber" value="{$oldData['gnumber']}" class="form-control">
                    <span class="help-block m-b-none">请输入商品货号。。。</span>
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label" for="input-id-1">单位</label>
                <div class="col-sm-10">
                    <input type="text" name="unit" class="form-control" id="input-id-1" value="{$oldData['unit']}">
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">市场价</label>
                <div class="col-sm-10">
                    <input type="number" name="marketprice" class="form-control" value="{$oldData['marketprice']}">
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商城价</label>
                <div class="col-sm-10">
                    <input type="number"  class="form-control" name="shopprice" placeholder="" value="{$oldData['shopprice']}">
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">点击次数</label>
                <div class="col-sm-10">
                    <input type="text"  class="form-control" name="click" placeholder="" value="{$oldData['click']}">
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">库存</label>
                <div class="col-sm-10">
                    <input type="text"  class="form-control" name="total" placeholder="" value="{$oldData['total']}">
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商品属性</label>
                <div class="col-sm-10">
                    <table class="table table-hover" id="attr">
                        <foreach name="attrData" item="vo">
                            <tr>
                                <td>{$vo['tname']}</td>
                                <td>
                                    <select name="attr[{$vo['taid']}]" id="">
                                        <option value="1">请选择</option>
                                        <foreach name="vo['tvalue']" item="vv">
                                            <option value="{$vv}" <if condition="in_array($vv,$hasAttr)">selected</if>>{$vv}</option>
                                        </foreach>
                                    </select>
                                </td>
                            </tr>
                        </foreach>
                    </table>
                </div>
            </div>
            <!--点击添加规格按钮，追加一个-->
            <script>
                $(function(){
                    //bind
                    $('#spec').delegate('.addSpec','click',function(){
                        //将当前tr复制一份
                        var tr = $(this).parents('tr').clone();
                        //将添加按钮换成删除按钮
                        //tr.find('button').remove();
                        var del  = '<button type="button" class="btn btn-danger btn-xs delSpec">删除</button>';
                        tr.find('td').last().html(del);
                        //把复制的这份tr往后面追加
                        $(this).parents('tr').after(tr);
                    })
                    //点击删除，删除一项
                    $('#spec').delegate('.delSpec','click',function(){
                        $(this).parents('tr').remove();
                    })
                })
            </script>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商品规格</label>
                <div class="col-sm-10">
                    <table class="table table-hover" id="spec">
                        <foreach name="specData" item="vo">
                            <tr>
                                <td>{$vo['tname']}</td>
                                <td>
                                    <select name="spec[{$vo['taid']}][spec][]" id="">
                                        <option value="2">请选择</option>
                                        <foreach name="vo['tvalue']" item="v">
                                            <option <if condition="$vo['gtvalue']==$v">selected</if>  value="{$v}">{$v}</option>
                                        </foreach>
                                    </select>
                                </td>
                                <td>
                                    附加价格
                                </td>
                                <td>
                                    <input type="text" name="spec[{$vo['taid']}][added][]" value="{$vo['added']}">
                                </td>
                                <td>
                                    <button type="button" class="btn btn-danger btn-xs delSpec">删除</button>
                                </td>
                            </tr>
                            <script>
                                $(function(){
                                    $('#spec').find("tr:contains({$vo['tname']})").eq(0).find("td:last").html('<button type="button" class="btn btn-success btn-xs addSpec">添加</button>');
                                })
                            </script>
                        </foreach>
                    </table>
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <!--引入uploadify相关js、css-->
            <div class="form-group">
                <label class="col-sm-2 control-label">列表图</label>
                <div class="col-sm-10">
                    <div class="input-group">
                        <input type="text" class="form-control" name="pic" readonly="" value="{$oldData['pic']}">
                        <div class="input-group-btn">
                            <button onclick="upImage(this)" class="btn btn-default" type="button">选择图片</button>
                        </div>
                    </div>
                    <div class="input-group" style="margin-top:5px;">
                        <img src="__ROOT__/{$oldData['pic']}" class="img-responsive img-thumbnail" width="150">
                        <em class="close" style="position:absolute; top: 0px; right: -14px;" title="删除这张图片" onclick="removeImg(this)">×</em>
                    </div>
                </div>
                <script>
                    //上传图片
                    function upImage(obj) {
                        require(['util'], function (util) {
                            options = {
                                multiple: false,//是否允许多图上传
                                //data是向后台服务器提交的POST数据
                                data:{name:'后盾人',year:2099},
                            };
                            util.image(function (images) {          //上传成功的图片，数组类型 
                                $("[name='pic']").val(images[0]);
                                $(".img-thumbnail").attr('src','__ROOT__/'+ images[0]);
                            }, options)
                        });
                    }

                    //移除图片
                    function removeImg(obj) {
                        $(obj).prev('img').attr('src', 'resource/images/nopic.jpg');
                        $(obj).parent().prev().find('input').val('');
                    }
                </script>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商品图册</label>
                <div class="col-sm-2">
                    <button onclick="upManyImage(this)" class="btn btn-default" type="button">选择图片</button>
                    <script>
                        //上传图片
                        function upManyImage(obj) {
                            require(['util'], function (util) {
                                options = {
                                    //上传多图
                                    multiple: true,
                                };
                                util.image(function (images) {
                                    $(images).each(function(k,v){
                                        $("<li><img style='width:80px' src='__ROOT__/"+v+"'/><input type='hidden' name='img[]' value='"+v+"'/> <a href='javascript:;' class='delManyImg'>X</a></li>").appendTo('#box');
                                    })
                                }, options)
                            });
                        }
                    </script>
                </div>
                <style>
                    #box li{
                        float: left;
                        list-style:none;
                    }
                </style>
                <?php
                    $big = explode('|',$oldData['big']);
                ?>
                <div class="col-sm-8" id="box">
                    <foreach name="big" item="vo">
                        <li>
                            <img src="__ROOT__/{$vo}" alt="" style='width:80px'>
                            <input type="hidden" name="img[]" value="{$vo}">
                            <a href="javascript:;" class='delManyImg'>X</a>
                        </li>
                    </foreach>
                </div>
                <script>
                    $('#box').delegate('.delManyImg','click',function(){
                        $(this).parent().remove();
                    })
                </script>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">商品详情</label>
                <div class="col-sm-10">
                    <textarea id="container1" name="intro" style="height:300px;width:100%;">{$oldData['intro']}</textarea>
                    <script>
                        require(['util'], function (util) {
                            util.ueditor('container1', {hash:2,data:'hd'}, function (editor) {
                                //这是回调函数 editor是百度编辑器实例
                            })
                        });
                    </script>
                </div>
            </div>
            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group">
                <label class="col-sm-2 control-label">售后服务</label>
                <div class="col-sm-10">
                    <textarea id="container"  name="service" style="height:300px;width:100%;">{$oldData['service']}</textarea>
                    <script>
                        require(['util'], function (util) {
                            util.ueditor('container', {hash:2,data:'hd'}, function (editor) {
                                //这是回调函数 editor是百度编辑器实例
                            });
                        })
                    </script>
                </div>
            </div>
            <input type="hidden" name="tid" value="{$oldData['tid']}">

            <input type="hidden" name="gid" value="{$oldData['gid']}">
            <button class="btn btn-twitter btn-block m-b-sm">提交</button>
        </form>
    </div>
</section>
<script>
    function controller($scope, $, _){

    }
    function store(obj){
        var data = $(obj).serialize();//序列化获取表单内容
        $.post("{:u('edit')}",data,function(res){
            if(res.status){
                //成功
                util.message(res.info,"{:u('index')}",'success');
            }else{
                //说明失败
                util.message(res.info,"back",'error');
            }
        },'json')
        return false;
    }
</script>


